<template>
  <div>
    <h1>【aty-form】 component demo</h1>
    <p>【aty-form】 本质</p>
    <div class="fd-aty-form">
      <aty-row>
        <aty-title level="4">1.aty-form 展示</aty-title>
        <aty-form
          :labelWidth="120"
          :data="model"
          :labelPosition="'right'"
          ref="jsForm"
          url="./static/test.json">
          <aty-input prop="user"
                     label="user"
                     required
                     elementId="jsInputItem1"
                     name="input"
                     type="email"
                     placeholder="请输入用户名"
                     :clearable="true"
                     v-model="model.user"
                     :min="3"
                     :max="5" />
          <!--单选框实例-->
          <aty-radio-group name="sex"
                           :dataList="sexList"
                           v-model="model.sex"
                           label="sex"
                           prop="sex"
                           required />

          <aty-input-number
            elementId="jsInputItem2"
            name="input"
            value=""
            type="number"
            placeholder="请输入年龄"
            :clearable="true"
            prop="age"

            label="age"
            v-model="model.age"

            :min="10"
            :max="150"
            :required="true" />
          <aty-checkbox-group
            name="love"
            v-model="model.love"
            :dataList="loveList"
            required
            :min="1"
            :max="3"
            label="love"
            prop="love" />

          <aty-input
            elementId="jsInputItem13"
            name="input"
            value=""
            type="text"
            placeholder="请输入"
            :clearable="true"
            prop="asyncValidator"
            :label="'async validator '"
            v-model="model.asyncValidator"

            :validator="validator"
            :required="true" />

          <aty-input
            elementId="jsInputItem14"
            name="input"
            value=""
            type="text"
            placeholder="请输入"
            :clearable="true"
            prop="asyncValidator2"
            :label="'async validator2 '"
            v-model="model.asyncValidator2"
            :validator="validator2"
            :required="true" />
          <aty-date-picker
            format="yyyy-MM-dd"
            type="date"
            placement="bottom-end"
            v-model="model.date"
            prop="date"
            label="date"
            required
            placeholder="选择日期" />
          <aty-select :data="cityList"
                      label="city"
                      v-model="model.city"
                      :required="true"
                      :showMessage="true"
                      prop="city"
                      ref="select"
                      @change="change" />
          <aty-select-tree :data="treeData"
                           label="tree"
                           v-model="model.tree"
                           :required="true"
                           prop="tree"
                           ref="tree"
                           filterable
                           @change="change" />
          <aty-switch
            :label="'switch'"
            v-model="model.switch"
            :required="true"
            :showMessage="true"
            prop="switch" />
          <aty-textarea placeholder="请输入..."
                        :label="'introduce'"
                        prop="introduce"
                        :rules="introduceRules"
                        :required="true"
                        :showMessage="true"
                        v-model="model.introduce" />

          <aty-row ref="jsForm2" class="aty-tac">
            <aty-button type="primary" @click="clickSubmit">submit</aty-button>
            <aty-button type="primary" @click="clickGetData">getData</aty-button>
            <aty-button type="primary" @click="clickGetData2">getData no validate</aty-button>
            <aty-button type="primary" @click="clickValidate">validate</aty-button>
            <aty-button type="default" @click="clickReset">reset</aty-button>
          </aty-row>
        </aty-form>
      </aty-row>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      // 数据模型
      model: {
        user: '',
        sex: '',
        love: [],
        age: 10,
        date: '2018-10-10',
        city: '',
        switch: false,
        asyncValidator: '',
        asyncValidator2: '',
        introduce: '',
        tree: ''
      },
      sexList: [{
        code: '1',
        codeType: 'sex',
        name: '男'
      },
      {
        code: '2',
        codeType: 'sex',
        name: '女'
      }, {
        code: '3',
        codeType: 'sex',
        name: '其他'
      }
      ],
      loveList: [
        {
          code: '1',
          codeType: 'fruit',
          name: '苹果'
        },
        {
          code: '2',
          codeType: 'fruit',
          name: '香蕉'
        },
        {
          code: '3',
          codeType: 'fruit',
          name: '梨'
        },
        {
          code: '4',
          codeType: 'fruit',
          name: '橘子'
        },
        {
          code: '5',
          codeType: 'fruit',
          name: '菠萝'
        }
      ],
      // 城市
      cityList: [
        {
          code: 'beijing',
          codeType: 'beijing',
          name: '北京市'
        },
        {
          code: 'shanghai',
          codeType: 'shanghai',
          name: '上海市'
        },
        {
          code: 'shenzhen',
          codeType: 'shenzhen',
          name: '深圳市'
        },
        {
          code: 'hangzhou',
          codeType: 'hangzhou',
          name: '杭州市'
        },
        {
          code: 'nanjing',
          codeType: 'nanjing',
          name: '南京市'
        },
        {
          code: 'chongqing',
          codeType: 'chongqing',
          name: '重庆市'
        },
        {
          code: 'guangdong',
          codeType: 'guangdong',
          name: '广东省'
        },
        {
          code: 'guangxi',
          codeType: 'guangxi',
          name: '广西'
        },
        {
          code: 'hainan',
          codeType: 'hainan',
          name: '海南省'
        },
        {
          code: 'xinjiang',
          codeType: 'xinjiang',
          name: '新疆'
        }
      ],
      introduceRules: [{
        required: true,
        message: '请输入密码',
        trigger: 'blur'
      }, {
        type: 'string',
        min: 6,
        message: '不得少于6个字符',
        trigger: 'blur'
      }],
      treeData: (function (len) {
        var _data = []
        let k = 0
        for (let i = 0; i < len; i++) {
          k++
          _data.push(
            {
              name: '一级 ' + k,
              id: '' + k,
              disabled: k == 2,
              open: true,
              children: [{
                id: k + '-' + k,
                name: '二级 ' + k + '-' + k,
                disabled: false,
                children: [{
                  icon: '/src/components/css/images/treeIcon/avatar.png',
                  id: k + '-' + k + '-' + k,
                  disabled: false,
                  name: '三级 ' + k + '-' + k + '-' + k
                }]
              }]
            }
          )
        }
        return _data
      })(7)
    }
  },
  methods: {
    validator: function (rule, value, callback) {
      //  callback 必须执行，无论成功还是失败，否则验证会一直等待。
      const _promise = new Promise(function (resolve, reject) {
        setTimeout(function () {
          console.log('2秒后validator验证成功')
          resolve('validator验证成功')
        }, 2000)
      })
      _promise.then(function () {
        callback()
      }, function (data) {
        callback(data)
      })
    },
    validator2: function (rule, value, callback) {
      //  callback 必须执行，无论成功还是失败，否则验证会一直等待。
      const _promise = new Promise(function (resolve, reject) {
        setTimeout(function () {
          // console.log('3秒后validator2验证失败')
          console.log('3秒后validator2验证成功')
          resolve('validator2验证成功')
          // reject('validator2验证失败');
        }, 3000)
      })
      _promise.then(function () {
        callback()
      }, function (data) {
        callback(data)
      })
    },
    change: function (value, name, index) {
      Artery.message.info(value + ': ' + name)
      // this[name]=value;
    },
    clickSubmit () {
      console.log('validate')
      this.$refs.jsForm.submit(function (valid, data) {
        console.log('valid' + valid)
        console.log('data')
        if (data) {
          console.log(data.data)
        } else {
          console.log(data)
        }
      })
    },
    clickReset () {
      console.log('重置')
      this.$refs.jsForm.resetFields()
    },
    clickGetData () {
      console.log('获取数据默认需要验证')
      this.$refs.jsForm.getData(function (data) {
        console.log('data:')
        console.log(data)
      })
    },
    clickGetData2 () {
      console.log('获取数据,不需要验证！')
      this.$refs.jsForm.getData(true, function (data) {
        console.log('data:')
        console.log(data)
      })
    },
    clickValidate () {
      console.log('进行表单验证')
      this.$refs.jsForm.validate().then(() => {
        console.log('valid通过')
      }).catch((error, field) => {
        console.error(error, field)
      })
    }
  },
  mounted () {
    setTimeout(() => {
      this.model.user = '吴惟刚',
      this.model.sex = '1',
      this.model.love = ['1'],
      this.model.age = 11,
      this.model.date = '2018-11-01',
      this.model.city = 'beijing',
      this.model.switch = false,
      this.model.asyncValidator = 1,
      this.model.asyncValidator2 = 'haha',
      this.model.introduce = '111222',
      this.model.tree = '2-2'
    }, 3000)
  }
  //  components: { Alert, Icon }
}
</script>
<style lang="less"  type="text/less"  >
    .fd-aty-form {
        padding: 30px;
        text-align:left;
        .aty-row {
            padding: 5px 0;
        }
    }
</style>
